<template>
  <div class="boss-container">
    <el-button type="primary" style="margin-bottom: 20px" @click="showDrawer('add')">新增</el-button>
    <template>
      <el-table
          :data="tableData"
          style="width: 100%;margin-bottom: 20px;"
          row-key="menuId"
          border
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      >
        <el-table-column prop="menuName" label="菜单名称" width="240" align="center">
        </el-table-column>
        <el-table-column prop="icon" label="菜单图标" width="160" align="center">
          <template slot-scope="scope">
            <i :class="scope.row.icon " style="font-size: 16px"></i>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="菜单类型" width="160" align="center">
          <template slot-scope="scope">
            <el-tag
                :type="scope.row.type === 0 ? 'success' : (scope.row.type === 1 ? 'warning' : 'danger')"
                size="small"
                effect="dark"
            >
              {{ scope.row.type | typeFilter }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="url" label="菜单url" width="220" align="center">
        </el-table-column>
        <el-table-column prop="component" label="菜单组件" align="center">
        </el-table-column>
        <el-table-column prop="orderNum" label="排序" width="60" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center" width="220">
          <template slot-scope="scope">
            <el-button size="mini" round type="warning" @click="showDrawer('edit', scope.row.menuId)">修改</el-button>
            <el-button size="mini" round type="danger" @click="handleDelete(scope.row.menuId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <menu-drawer :drawer-state="drawerState" @drawerClose="drawerClose"></menu-drawer>
  </div>
</template>

<script>
import MenuDrawer from './drawer/MenuDrawer'
import { deleteMenu, getMenuAllList } from '@/api/authority'

export default {
  name: 'Menu',
  components: {
    MenuDrawer
  },
  filters: {
    typeFilter(value) {
      if (value === 0) {
        return '目录'
      } else if (value === 1) {
        return '菜单'
      } else if (value === 3) {
        return '按钮'
      }
    }
  },
  data() {
    return {
      drawerState: {
        visible: false,
        method: '',
        params: ''
      },
      tableData: []
    }
  },
  mounted() {
    this.getMenuAllList()
  },
  methods: {
    showDrawer(method, params) {
      this.drawerState = {
        visible: true,
        method,
        params: params || ''
      }
    },
    async getMenuAllList() {
      const res = await getMenuAllList()
      this.tableData = res.data.menuTree
    },
    async handleDelete(menuId) {
      await deleteMenu(menuId)
      await this.getMenuAllList()
      this.$message.success('删除成功')
    },
    drawerClose(val) {
      if (val) {
        this.getMenuAllList()
      }
      this.drawerState = {}
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
